<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> <link rel="stylesheet" href="../static/css/base.css">
<!--    <link rel="stylesheet" href="src/static/css/base.css">-->

    <style>
        .header-left>:nth-child(1){
            height: 24px;
        }
        .header-right>a{
            display: block;
            width: 108px;
            height: 33px;
            text-align: center;
            line-height: 33px;
            box-sizing: border-box;
            font-size: 14px;
        }
        .header-right>:nth-child(1){
            background-color: var(--themeColor);
            color: white;
        }
        .header-right>:nth-child(2){
            color: var(--themeColor);
            border: 1px solid var(--themeColor);
            margin-left: 15px;
        }
    </style>
</head>
<body>
<!--语义化标签-->
<header>
    <div class="width flex justify-between ">
        <div class="header-left">
            <img src="../static/image/logo1.png" alt="有道云笔记">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">产品</a>
                </li>
                <li>
                    <a href="">会员</a>
                </li>
                <li>
                    <a href="">云协作</a>
                </li>
                <li>
                    <a href="">模板库</a>
                </li>
                <li>
                    <a href="">下载</a>
                </li>
            </ul>
        </div>
        <div class="header-right flex ">
            <a href="">免费体验会员</a>
            <a href="">登录/注册</a>
        </div>
    </div>
</header>
</body>
</html>